<template>
  <aside class="friends-list">
    <ul>
      <li
        v-for="friend in friends"
        :key="friend.memberId"
        :class="{ selected: friend.memberId === selectedFriendId }"
        @click="handleSelectFriend(friend)"
      >
        <img :src="friend.avatar" alt="avatar" class="avatar" />
        <div class="friend-info">
          <div class="nickname">{{ friend.nickname }}</div>
          <div class="last-message">
            {{ formatLassMessage(friend.last10Messages) }}
          </div>
          <div class="last-message-time">
            {{ formatLastMessageTime(friend.last10Messages) }}
          </div>
          <div v-if="friend.unreadCount > 0" class="unread-count">
            {{ computedUnreadMessage(friend) }}
          </div>
        </div>
      </li>
    </ul>
  </aside>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import { useUserStoreHook } from "@/store/modules/user";

const props = defineProps({
  friends: Array,
  selectedFriendId: String
});

const emit = defineEmits(["selectFriend"]);

const handleSelectFriend = friend => {
  emit("selectFriend", friend);
};

const formatLassMessage = messages => {
  if (!messages || messages.length === 0) {
    return "";
  }
  const lastMessage = messages[messages.length - 1];
  const lastMessageContent = lastMessage.content;
  // 超过 20 个字符，截取前 20 个字符
  return lastMessageContent.length > 20
    ? lastMessageContent.slice(0, 20) + "..."
    : lastMessageContent;
};

const computedUnreadMessage = friend => {
  return friend.unreadCount > 99 ? "99+" : friend.unreadCount;
};

// 格式化最后一条消息的发送时间
const formatLastMessageTime = messages => {
  if (!messages || messages.length === 0) {
    return "";
  }
  const lastMessage = messages[messages.length - 1];
  return new Date(lastMessage.sendTime).toLocaleTimeString();
};
</script>

<style scoped lang="scss">
.friends-list {
  min-width: 25vw;
  padding: 10px;
  background: rgb(252 252 255 / 100%);

  ul {
    padding: 0;
    margin: 0;
    list-style: none;

    li {
      position: relative;
      display: flex;
      align-items: center;
      padding: 10px;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s;

      &:hover {
        background-color: #f1f1f1;
      }

      &.selected {
        background-color: #e0e0e0;
      }

      .avatar {
        width: 40px;
        height: 40px;
        margin-right: 10px;
        border-radius: 50%;
      }

      .friend-info {
        .nickname {
          font-weight: bold;
        }

        .last-message {
          font-size: 12px;
          color: #888;
        }

        .last-message-time {
          position: absolute;
          top: 10px;
          right: 10px;
          font-size: 10px;
          color: #888;
        }

        .unread-count {
          position: absolute;
          right: 10px;
          bottom: 10px;
          padding: 1px 4px;
          font-size: 8px;
          font-weight: normal;
          color: #fff;
          background-color: #f00;
          border-radius: 8px;
        }
      }
    }
  }
}
</style>
